<template>
  <view>
    <scroll-view class="coupop-list">
      <view class="coupop-box" v-for="(item, index) in coupopList" :key="index">
        <view class="coupop-item">
          <view
            :class="'left-coupop ' + (item.status !== 1 ? 'outStatus' : '')"
          >
            <view :class="'price ' + (item.status !== 1 ? 'outColor' : '')">
              {{ item.price }}
              <text class="price-small">元</text>
            </view>
            <view :class="'name ' + (item.status !== 1 ? 'outColor' : '')"
              >满减券</view
            >
            <view
              :class="'left-btn ' + (item.isUsed ? 'used' : '')"
              v-if="item.status === 1"
              >{{ item.isUsed ? "已使用" : "去使用" }}</view
            >
            <view class="left-btn out-btn" v-if="item.status === 2"
              >未使用</view
            >
            <view class="left-btn out-btn" v-if="item.status === 3"
              >未使用</view
            >
          </view>
          <view class="right-coupop">
            <view>
              <view :class="'title ' + (item.status !== 1 ? 'outColor' : '')">{{
                item.title
              }}</view>
              <view :class="'rule ' + (item.status !== 1 ? 'outColor' : '')">{{
                item.rule
              }}</view>
              <!-- 已使用状态需要显示关联订单信息 -->
              <view class="order" v-if="item.isUsed">
                <text>关联订单：{{ item.order }}</text>
                <uni-icons type="right" size="12" color="#8d6021"></uni-icons>
              </view>
            </view>
            <view
              :class="'expirationTime ' + (item.status !== 1 ? 'outColor' : '')"
            >
              <view>有效期：{{ item.expirationTime }}</view>
              <view
                class="toggle-box"
                @click="toggleDetail(index)"
                :data-index="index"
              >
                <uni-icons
                  type="down"
                  size="12"
                  v-if="!item.showDetail"
                ></uni-icons>
                <uni-icons type="up" size="12" v-else></uni-icons>
              </view>
            </view>
          </view>
          <image
            src="/static/coupon/used.png"
            class="icon_used"
            v-if="item.isUsed"
          />
          <image
            src="/static/coupon/outTime.png"
            class="icon_used"
            v-if="item.status == 2"
          />
          <image
            src="/static/coupon/cold.png"
            class="icon_used"
            v-if="item.status == 3"
          />
          <!-- <view class="out-out"  wx:if="{{item.status==2}}">已过期</view> -->
          <!-- <view class="out-out"  wx:if="{{item.status==3}}">已冻结</view> -->
        </view>

        <view class="coupop-detail" v-if="item.showDetail">
          <view class="detail-info">优惠券名称：{{ item.title }}</view>
          <view class="detail-info">面额：{{ item.price }}元</view>
          <view class="detail-info">有效期：{{ item.expirationTime }}</view>
          <view class="detail-info">状态：{{ statusType(item.status) }}</view>
          <view class="detail-info"
            >是否使用：{{ item.isUsed ? "已使用" : "未使用" }}</view
          >
          <view class="detail-info">使用时间：{{ item.useTime }}</view>
          <view class="detail-info">使用规则：{{ item.rule }}</view>
          <view class="detail-info">关联订单：{{ item.order }}</view>
          <view class="detail-info">发放日期：{{ item.issueTime }}</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
// pages/coupon/coupon.js
export default {
  data() {
    return {
      coupopList: [
        {
          title: '充电满10减3优惠券',
          //优惠券名称 有效 未使用
          price: '3',
          //面额
          expirationTime: '2024-05-15 12:20:50',
          //有效期
          status: 1,
          //1 有效 2过期 3冻结
          isUsed: false,
          //0 未使用 1已使用
          useTime: '2024-05-15 12:50:50',
          rule: '满10元可用',
          order: '2024051512056963001',
          //点击这里 跳转到订单详情页
          issueTime: '2024-05-10 10:00:00',
          //发放日期
          showDetail: false
        },
        {
          title: '充电满10减优惠券',
          //优惠券名称 有效 已使用
          price: '4',
          //面额
          expirationTime: '2024-05-15 12:20:50',
          //有效期
          status: 1,
          //1 有效 2过期 3冻结
          isUsed: true,
          //0 未使用 1已使用
          useTime: '2024-05-15 12:50:50',
          rule: '满10元可用',
          order: '2024051512056963001',
          //点击这里 跳转到订单详情页
          issueTime: '2024-05-10 10:00:00',
          //发放日期
          showDetail: false
        },
        {
          title: '充电满10减优惠券',
          //优惠券名称
          price: '5',
          //面额
          expirationTime: '2024-05-15 12:20:50',
          //有效期
          status: 2,
          //1 有效 2过期 3冻结
          isUsed: false,
          //0 未使用 1已使用
          useTime: '2024-05-15 12:50:50',
          rule: '满10元可用',
          order: '2024051512056963001',
          //点击这里 跳转到订单详情页
          issueTime: '2024-05-10 10:00:00',
          //发放日期
          showDetail: false
        },
        {
          title: '充电满10减优惠券',
          //优惠券名称
          price: '8',
          //面额
          expirationTime: '2024-05-15 12:20:50',
          //有效期
          status: 3,
          //1 有效 2过期 3冻结
          isUsed: false,
          //0 未使用 1已使用
          useTime: '2024-05-15 12:50:50',
          rule: '满10元可用',
          order: '2024051512056963001',
          //点击这里 跳转到订单详情页
          issueTime: '2024-05-10 10:00:00',
          //发放日期
          showDetail: false
        }
      ]
    };
  }
    /**
     * 生命周期函数--监听页面加载
     */,
  onLoad(options) { },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() { },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() { },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() { },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() { },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() { },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() { },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() { },
  methods: {
    statusType(type) {
      if (type == 1) {
        return "有效";
      } else if (type == 2) {
        return "已过期";
      } else if (type == 3) {
        return "已冻结";
      }
    }
    ,
    toggleDetail(index) {
      this.coupopList[index].showDetail = !this.coupopList[index].showDetail
    }
  }
};
</script>
<style>
@import "./sysCoupon.css";
</style>
